// ==UserScript==
// @name         Youdao Dictionary Tooltip.js
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Show a custom styled tooltip for selected text.
// @author       YourName
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @require      https://unpkg.com/@popperjs/core@2
// @require      https://unpkg.com/tippy.js@6
// ==/UserScript==

(function() {
    'use strict';

// 添加自定义样式
GM_addStyle(`
    .tippy-box.custom-theme {
        background-color: #ffffff; /* 使用纯白色背景以提高对比度和清晰度 */
        color: #333333; /* 深色文字以提高可读性 */
        border-radius: 6px; /* 圆角边框使外观更加现代 */
        border: 1px solid #dddddd; /* 轻微的边框增加定义 */
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* 较深的阴影增加立体感 */
        padding: 10px 15px; /* 内边距足够空间使文本不会挤压到边缘 */
        font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 使用易读的字体 */
        font-size: 13px; /* 字号不宜太大也不宜太小 */
        line-height: 1.4; /* 行间距增加文本的呼吸空间 */
        max-width: 320px; /* 最大宽度限制内容的展开 */
        text-align: left; /* 左对齐文本 */
        z-index: 10000; /* 确保tooltip在最上层 */
    }
    .tippy-box.custom-theme[data-placement^='top'] > .tippy-arrow::before {
        border-top-color: #ffffff;
    }
    .tippy-box.custom-theme[data-placement^='bottom'] > .tippy-arrow::before {
        border-bottom-color: #ffffff;
    }
    .tippy-content {
        word-wrap: break-word;
    }
`);



    // 全局变量来追踪当前活跃的tooltip实例
    let tippyInstance = null;
    let tempSpan = null; // 用于追踪创建的临时span元素

    // 文本选择后的处理函数
    function handleTextSelection(e) {
        const selection = window.getSelection();
        if (selection.toString().trim() !== '' && selection.rangeCount > 0) {
            const selectedText = selection.toString().trim();

            // 发起跨域请求到有道词典
            GM_xmlhttpRequest({
                method: "GET",
                url: "https://dict.youdao.com/w/" + encodeURIComponent(selectedText),
                onload: function(response) {
                    // 解析响应，获取 #phrsListTab 的内容
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(response.responseText, "text/html");
                    const phrsListTab = doc.querySelector("#phrsListTab");

                    if (phrsListTab) {
                        createTooltip(selection, phrsListTab.outerHTML);
                    } else {
                        createTooltip(selection, "No translation found.");
                    }
                }
            });
        }
    }


  function createTooltip(selection, content) {
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();

    // 创建一个临时的元素来作为 Tippy 的目标
    tempSpan = document.createElement('span');
    tempSpan.style.position = 'absolute';
    tempSpan.style.left = `${rect.left + window.scrollX}px`;
    tempSpan.style.top = `${rect.top + window.scrollY}px`;
    document.body.appendChild(tempSpan);

    // 初始化 Tippy
    tippyInstance = tippy(tempSpan, {
        content: content,
        allowHTML: true,
        interactive: true,
        theme: 'custom-theme',
        trigger: 'manual',
        hideOnClick: false,
        placement: 'auto', // 自动确定最佳位置
        offset: [0, 20], // 增加垂直偏移
        flip: true, // 允许tooltip在空间不足时翻转方向
        flipBehavior: ['top', 'bottom', 'right', 'left'], // 优先考虑的翻转方向
        onHidden(instance) {
            instance.destroy();
        }
    });

    // 显示 Tippy 悬浮窗
    tippyInstance.show();
}


    // 绑定文本选择事件
    document.addEventListener('mouseup', handleTextSelection);

    // 监听全页面的mousedown事件，用于关闭tooltip
    document.addEventListener('mousedown', function(e) {
        // 检查点击是否在tooltip内部
        if (tippyInstance && !e.target.closest('.tippy-box') && !e.composedPath().includes(tempSpan)) {
            tippyInstance.destroy();
            tippyInstance = null;
            if (tempSpan) {
                tempSpan.remove();
                tempSpan = null;
            }
        }
    }, true);
})();
